<template>
	<view class="wrapper bg-linear h-full">
		<view class="p-b-12 flex-s-c">
			<view class="title-symbol"></view>
			<view class="t-bold p-l-6">全部酒店</view>
		</view>

		<!-- 列表内容 -->
		<view v-if="isLoading" class="loading-container">
			<text class="loading-text">加载中...</text>
		</view>

		<view v-else-if="hotels.length === 0" class="empty-container">
			<text class="empty-text">暂无酒店数据</text>
		</view>

		<view v-else>
			<view v-for="(item, index) in hotels" :key="item.id || index"
				class="bg-color flex-s-c wrapper m-b-12 shadow1 border-r-10">
				<view @click="jumpDetail(item.id)">
					<van-image width="220rpx" height="220rpx" radius="20rpx" :src="item.image_text" />
				</view>
				<view class="p-l-20 flex">
					<view class="t-18 t-bold p-b-10" @click="jumpDetail(item.id)">{{item.title}}</view>
					<view class="t-12 p-b-10" @click="jumpDetail(item.id)">
						<text class="color7 t-bold">{{item.star}}分</text>
						<text class="p-l-6 color">{{item.label}}</text>
					</view>
					<view class="t-12 color8 p-b-14" @click="jumpDetail(item.id)">{{item.tags}}</view>
					<view class="flex-b-c">
						<view @click="jumpDetail(item.id)">
							<text class="color9 t-12 t-bold">￥</text>
							<text class="color9 t-18 t-bold">{{item.price}}</text>
							<text class="color4 t-12">起</text>
						</view>
						<view>
							<van-button type="primary" size="small" color="#f79a13" custom-style="border-radius:5px"
								@click="makePhone(item.mobile)">电话预定</van-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		nextTick
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		getHotelInfo
	} from '@/package/api/selList.js';

	const cid = ref('');
	const hotels = ref([]); // 初始化为空数组
	const schoolId = ref('');
	const isLoading = ref(true); // 加载状态
	const isError = ref(false); // 错误状态

	// 酒店列表
	const fetchHotelList = async () => {
		isLoading.value = true;
		isError.value = false;

		try {
			// 从本地存储获取学校ID
			schoolId.value = uni.getStorageSync('school_id');
			if (!schoolId.value) {
				console.error('未获取到学校ID');
				isError.value = true;
				isLoading.value = false;
				return;
			}

			// 准备请求参数（假设pageSize为20，不分页）
			const params = {
				campusId: schoolId.value,
				page: 1,
				pageSize: 20
			};

			console.log('请求酒店列表参数:', params);

			// 发送API请求
			const response = await getHotelInfo(params);
			console.log('获取酒店列表成功:', response);

			if (response.code === 200 && response.data && Array.isArray(response.data)) {
				// 处理返回的酒店数据，确保数据格式正确
				const hotelData = response.data.map((item, index) => {
					// 确保每个项都有唯一ID
					const id = item.id || `hotel-${index}`;

					return {
						id,
						title: item.title || '未知酒店',
						star: item.star || 0,
						label: item.label || '',
						tags: item.tags || '',
						price: item.price || 0,
						mobile: item.mobile || '',
						image_text: item.imageText || `https://picsum.photos/400/400?random=${id}`
					};
				});

				console.log('处理后的酒店数据:', hotelData);
				hotels.value = hotelData;
			} else {
				console.error('获取酒店列表失败:', response.msg || '返回数据格式不正确', response);
				isError.value = true;
			}
		} catch (error) {
			console.error('获取酒店列表失败:', error.message || '未知错误', error);
			isError.value = true;
		} finally {
			isLoading.value = false;
		}
	};

	const makePhone = (tel) => {
		uni.makePhoneCall({
			phoneNumber: tel
		});
	};

	const jumpDetail = (id) => {
		uni.navigateTo({
			url: `/package/pages/hotelList/hotelDetail?id=${id}`
		});
	};

	onLoad((options) => {
		cid.value = options.cid;
		fetchHotelList();
	});

	// 在页面显示时重新加载数据
	onShow(() => {
		fetchHotelList();
	});

	// 初始化数据
	onMounted(() => {
		// 页面挂载后加载数据
		fetchHotelList();
	});
</script>

<style scoped>
	.wrapper {
		padding: 0 30rpx;
	}

	.loading-container,
	.empty-container {
		padding: 100rpx 0;
		text-align: center;
	}

	.loading-text,
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.title-symbol {
		width: 8rpx;
		height: 32rpx;
		background-color: #3c91ff;
		border-radius: 4rpx;
	}

	.flex-s-c {
		display: flex;
		align-items: center;
	}

	.flex-b-c {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.t-bold {
		font-weight: bold;
	}

	.color {
		color: #666;
	}

	.color4 {
		color: #999;
	}

	.color7 {
		color: #ff9500;
	}

	.color8 {
		color: #666;
	}

	.color9 {
		color: #e84040;
	}

	.bg-color {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.shadow1 {
		box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.08);
	}

	.border-r-10 {
		border-radius: 10rpx;
	}

	.m-b-12 {
		margin-bottom: 12rpx;
	}

	.p-l-20 {
		padding-left: 20rpx;
	}

	.p-b-10 {
		padding-bottom: 10rpx;
	}

	.p-b-14 {
		padding-bottom: 14rpx;
	}
</style>